﻿<template>
  <base-container class="add-container">
    <!-- 搜索栏 -->
    <avue-table-search
      :option="searchOption"
      v-model="serviceParams"
      @search-change="loadTableSearch"
      @search-reset="loadTableSearchReset"
    ></avue-table-search>

    <base-table-card>
      <template #header-left>
        <el-tabs v-model="currentType" class="demo-tabs" @tab-change="handleTabClick">
          <el-tab-pane label="未上架" :name="2"></el-tab-pane>
          <el-tab-pane label="已上架" :name="3"></el-tab-pane>
          <!-- <el-tab-pane label="已售罄" :name="1"></el-tab-pane> -->
          <el-tab-pane label="已下架" :name="4"></el-tab-pane>
          <el-tab-pane label="草稿箱" :name="1"></el-tab-pane>
        </el-tabs>
      </template>
      <template #header-right>
        <el-button type="primary" class="add-btn" @click="goAdd">新增商品</el-button>
      </template>
      <avue-crud
        :option="tableOption"
        :data="tableData"
        :page="page"
        :table-loading="tableLoading"
        @refresh-change="loadTableSearch"
        @current-change="loadTablePageChange"
        @size-change="loadTablePageSizeChange"
      >
        <template #id="{ row }">
          <div class="product-card">
            <div class="product-card-head">
              商品编号：<span class="product-no">{{ row.id }}</span>
            </div>
            <div class="product-code">
              <base-icon name="iconfont ic-erweimalunkuo" :size="16" :color="'var(--bd)'" />
            </div>
            <div class="product-card-bottom">
              <div class="product-img">
                <el-image
                  style="width: 90px; height: 90px"
                  :src="row.imageUrl"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[row.imageUrl]"
                  show-progress
                  :preview-teleported="true"
                  fit="cover"
                />
              </div>
              <div class="product-desc">
                <el-space direction="vertical" alignment="start" :size="6">
                  <el-text line-clamp="2" class="desc-item">
                    <span class="title">{{ row.productName }}</span>
                  </el-text>
                  <div class="desc-item"><span>商品配件：</span>{{ row.productComponentFlagDesc }}</div>
                  <el-text line-clamp="1" class="desc-item"
                    ><span>增值服务：</span>{{ row.additionalServices }}</el-text
                  >
                </el-space>
              </div>
            </div>
          </div>
        </template>
        <template #category="{ row }">{{ goodsCategory(row) }}</template>
        <template #menu="{ row }">
          <el-button link type="primary" @click="handleOpenDetail(row)">查看</el-button>
          <el-popconfirm
            v-if="row.productStatus !== 1"
            :title="row.productStatus === 3 ? '确定要下架该商品吗？' : '确定要上架该商品吗？'"
            @confirm="handleLaunchOperate(row)"
          >
            <template #reference>
              <el-button link type="primary">{{ row.productStatus === 3 ? "下架" : "上架" }}</el-button>
            </template>
          </el-popconfirm>
          <el-button link type="primary" @click="handleJumpEdit(row)">编辑</el-button>
          <el-button link type="primary" @click="handleCopyOperate(row.id)">复制</el-button>
          <el-popconfirm title="确定要删除该商品吗？" @confirm="handleDelOperate(row.id)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button link type="primary" @click="openLogModal(row)">日志</el-button>
        </template>
      </avue-crud>
    </base-table-card>
    <product-detail :visble="showDetail" :current-data="currentData" @hide="handleHideDetail" />
    <product-log :visble="showLog" :current-info="currentData" @hide="showLog = false" />
  </base-container>
</template>

<script setup>
  import option from "@/crudOption/product-list/search.js";
  import useCrudHook from "avue-table/useCrudHook";
  import ProductDetail from "./componets/ProductDetail.vue";
  import ProductLog from "./componets/ProductLog.vue";
  const { searchOption, tableOption } = option();
  // 路由实例
  const router = useRouter();
  // 商品状态
  const currentType = ref(2);
  // 详情显示
  const showDetail = ref(false);
  // 日志显示
  const showLog = ref(false);
  // 当前数据
  const currentData = ref({});
  // 商品类目
  const categoryList = ref([]);
  // 商品类目
  const goodsCategory = computed(() => {
    return info => {
      const categoryGroup = [];
      categoryList.value?.forEach(firstLeveItem => {
        if (info.firstCategoryId && firstLeveItem.value === info.firstCategoryId) {
          categoryGroup.push(firstLeveItem.label);
          // 查询一级类目名称
          firstLeveItem?.children?.forEach(secondLevelItem => {
            if (info.secondCategoryId && secondLevelItem.value === info.secondCategoryId) {
              // 查询二级类目名称
              categoryGroup.push(secondLevelItem.label);
              secondLevelItem?.children?.forEach(thirdLevelItem => {
                if (info.brandId && thirdLevelItem.value === info.brandId) {
                  // 查询三级类目名称
                  categoryGroup.push(thirdLevelItem.label);
                  thirdLevelItem?.children?.forEach(fourthLevelItem => {
                    // 查询四级类目名称
                    if (info.modelId && fourthLevelItem.value === info.modelId) {
                      categoryGroup.push(fourthLevelItem.label);
                    }
                  });
                }
              });
            }
          });
        }
      });
      return categoryGroup.length ? categoryGroup.join("/") : "-";
    };
  });
  // 初始化
  onMounted(() => {
    loadGetTableData();
    loadCategroryData();
  });
  // 获取类目数据
  const loadCategroryData = () => {
    Api.product.getProductClassification().then(res => {
      categoryList.value = res.data;
    });
  };
  // 增删改查 hook
  let {
    data: tableData,
    loading: tableLoading,
    page: page,
    search: serviceParams,
    get: loadGetTableData,
    pageNumChange: loadTablePageChange,
    pageSizeChange: loadTablePageSizeChange,
    searchReset: loadTableSearchReset,
    searchChange: loadTableSearch,
  } = useCrudHook({
    get: Api.product.getProductList,
    getParamsFormat: params => {
      console.warn(params);

      const searchParams = {
        ...params,
        productStatus: currentType.value,
      };
      if (searchParams?.addDate?.length) {
        searchParams.createTimeStart = `${params.addDate[0]} 00:00:00`;
        searchParams.createTimeEnd = `${params.addDate[1]} 23:59:59`;
        delete searchParams.addDate;
      }
      if (searchParams?.editDate?.length) {
        searchParams.updateTimeStart = `${params.editDate[0]} 00:00:00`;
        searchParams.updateTimeEnd = `${params.editDate[1]} 23:59:59`;
        delete searchParams.editDate;
      }
      delete searchParams.addDate;
      delete searchParams.editDate;
      return searchParams;
    },
  });
  const handleTabClick = () => {
    loadGetTableData();
  };
  // 打开详情
  const handleOpenDetail = info => {
    showDetail.value = true;
    currentData.value = info;
  };
  // 关闭详情
  const handleHideDetail = refresh => {
    showDetail.value = false;
    // currentData.value = {};
  };
  // 上下架
  const handleLaunchOperate = info => {
    Api.product.launchProduct({ id: info.id, upOrDown: info.productStatus === 3 ? 1 : 2 }).then(() => {
      $msg.success("操作成功");
      loadGetTableData();
    });
  };
  // 复制
  const handleCopyOperate = id => {
    Api.product.copyProduct({ id }).then(() => {
      $msg.success("复制成功");
      loadGetTableData();
    });
  };
  // 复制
  const handleDelOperate = id => {
    Api.product.delProduct({ id }).then(() => {
      $msg.success("删除成功");
      loadGetTableData();
    });
  };
  // 跳转新增商品
  const goAdd = () => {
    router.push({ path: "/product/add-product" });
  };
  // 跳转编辑
  const handleJumpEdit = data => {
    router.push({ path: "/product/add-product", query: { id: data.id } });
  };
  // 日志显示
  const openLogModal = info => {
    currentData.value = info;
    showLog.value = true;
  };
</script>

<style lang="scss" scoped>
  .product-card {
    position: relative;
    height: 160px;
    background: linear-gradient(180deg, #f4f3f6 0%, rgba(255, 255, 255, 0) 55.29%);
    border-radius: 8px 8px 0 0;
    padding: 10px 12px;
    .product-card-head {
      width: 100%;
      font-size: 12px;
      color: var(--ct3);
      text-align: left;
      > span {
        color: var(--bd);
      }
    }
    .product-code {
      position: absolute;
      width: 32px;
      height: 32px;
      top: 0;
      right: 0;
      background-color: var(--bd9);
      border-radius: 0 8px 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .product-card-bottom {
      display: flex;
      justify-content: space-between;
      .product-img {
        width: 100px;
        height: 100px;
        padding: 5px;
        border-radius: 8px;
        border: 1px solid var(--fl1);
      }
      .product-desc {
        width: calc(100% - 110px);
        .title {
          font-size: 14px;
          color: var(--ct1);
        }
        .desc-item {
          width: 240px;
          font-size: 12px;
          text-align: left;
          color: var(--ct1);
          > span {
            color: var(--ct3);
          }
        }
      }
    }
  }
</style>
